<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- v-for渲染li，并以从父组件传过来的数组list为循环 -->
    <li  v-for="item in list " :key="item.id" :class="{completed:item.isDone}" >
                                                        <!-- completed是作为一个样式存在的，而:class这里是指当item.isDone为ture时
                                                        添加这个样式，也就是下横线阴影效果，为false则是正常状态 -->
      <div class ="view">
        <input v-model="item.isDone" class="toggle" type="checkbox" />
                     <!-- 这里是让item.isDone与表单的选与不选做布尔值绑定，选isDone就是为true
                        不选就是为false -->

      <label>{{item.name}}</label>
      <button @click="delTask(item.id)" class="destroy"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  // props:是vue中的属性传值，一般用于父组件传子组件值
  props:['list'],
  methods:{
    delTask(id){
      //将id传给父组件
      this.$emit('delTask',id)
    }

  }
};
</script> 